<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>通过插槽分发内容</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../vue.js"></script>

  </head>
  <body>

    <!-- app -->
    <div id="app">
      组件基础 — Vue.js<br />
      https://cn.vuejs.org/v2/guide/components.html<br />
      <br />
      <alert-box>这里是插槽内容</alert-box>
    </div>

    <script>

// 定义一个新组件
Vue.component('alert-box', {
  props:['title'],
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
    `
})

var app = new Vue({
  el: '#app',
  data : {
    'a':'工程',
    'b':'豌豆',
    'c':'事实'
  }
})


    </script>
  </body>
</html>
